<template>
	<view class="content">
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" :class="type == 0?'luo':''">
				<view class="left" :class="type == 0?'heng':''">
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/technicianadd/gril.png" mode="aspectFit"></image>
					</view>
					<view class="title font30 font600">
						{{item.num}}
					</view>
				</view>
				<view class="info">
					<view class="s_type">
						<view class="type font18">
							{{item.type}}
						</view>
						<view class="status font18">
							{{item.status}}
						</view>
					</view>
					<view class="time font18" v-if="type != 0">
						{{item.time}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				list: [{
					num: '02',
					type: '按摩早班',
					status: '休假',
					time: '09-06/09:12~'
				}, {
					num: '02',
					type: '按摩早班',
					status: '落牌',
					time: '09-06/09:12~'
				}, {
					num: '02',
					type: '按摩早班',
					status: '落牌',
					time: '09-06/09:12~'
				}, {
					num: '02',
					type: '按摩早班',
					status: '落牌',
					time: '09-06/09:12~'
				}, {
					num: '02',
					type: '按摩早班',
					status: '休假',
					time: '09-06/09:12~'
				}, {
					num: '02',
					type: '按摩早班',
					status: '落牌',
					time: '09-06/09:12~'
				}, {
					num: '02',
					type: '按摩早班',
					status: '休假',
					time: '09-06/09:12~'
				}, {
					num: '02',
					type: '按摩早班',
					status: '落牌',
					time: '09-06/09:12~'
				}, {
					num: '02',
					type: '按摩早班',
					status: '落牌',
					time: '09-06/09:12~'
				}, {
					num: '02',
					type: '按摩早班',
					status: '落牌',
					time: '09-06/09:12~'
				}]
			};
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 18rpx 14rpx;

		.list {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-gap: 10rpx;

			.luo {
				background: #A8A8A8 !important;

				.heng {
					background: #DCDCDC !important;
				}

				.userinfo {
					.title {
						color: #ffffff !important;
					}

					.name {
						color: #ffffff !important;
					}
				}

				.info {
					.type {
						color: #FFFFFF !important;
					}
				}
			}

			.item {
				width: 167rpx;
				height: 181rpx;
				background: #C6D9F0;
				border-radius: 10rpx;
				border: 1px solid #999999;

				.left {
					background: #E8F0F9;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
					border: 1px solid #999999;
					padding: 4rpx 0 4rpx 12rpx;

					.icon {
						width: 26rpx;
						height: 26rpx;
						display: flex;
						align-items: center;

						image {
							width: 26rpx;
							height: 26rpx;
						}
					}
				}

				.userinfo {
					display: flex;
					align-items: center;

					.icon {
						width: 26rpx;
						height: 26rpx;
						display: flex;
						align-items: center;
						margin-right: 8rpx;

						image {
							width: 26rpx;
							height: 26rpx;
						}
					}

					.title {
						margin-right: 8rpx;
						color: #666666;
					}

					.name {
						color: #666666;
					}
				}

				.info {
					padding: 14rpx 7rpx;

					.s_type {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 38rpx;

						.type {
							color: #333333;
						}

						.status {
							background: #999999;
							border-radius: 5rpx;
							width: 51rpx;
							height: 30rpx;
							color: #fff;
							text-align: center;
							line-height: 30rpx;
						}
					}

					.time {
						color: #4F4F4F;
					}
				}
			}
		}

	}
</style>